<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <a href="/home">home</a>
    <a href="/about">about</a>
    <div class="container">default</div>
  </div>

  <script>
    const $container = document.querySelector('.container')
    const $a = document.getElementsByTagName('a')
    for (const item of $a) {
      item.addEventListener('click', e => {
        e.preventDefault()
        const href = item.getAttribute('href')
        // console.log(href);
        history.pushState({}, "", href)

        // console.log(location.pathname);
        switch (location.pathname) {
          case "/home":
            $container.innerHTML = "home"
            break
          case "/about":
            $container.innerHTML = "about"
            break
          default:
            $container.innerHTML = "default"
        }
      })
    }
  </script>
</body>

</html>